@scale: 0.6;

@bigSize: 10vw;
@smallSize: 3.6vw;
@ratioLR: 1;
@ratioB: 0.7;

.flag {
    width: 100vw * @scale;
    height: calc(100vw * @scale *2/3);
    position: relative;
    top: 0;
    left: 0;
}

.main {
    background-color: #de2910;
}

.starWrapper {
    
    position: absolute;
    &.big {
        top: calc(13.3vw * @scale);
        left: calc(7vw * @scale);
    }
    &.small1 {
        top: calc(3.5vw * @scale);
        left: calc(34.9vw * @scale);
        transform: rotate(98deg);
    }
    &.small2 {
        top: calc(11vw * @scale);
        left: calc(42.8vw * @scale);
        transform: rotate(119deg);
    }
    &.small3 {
        top: calc(22vw * @scale);
        left: calc(36.6vw * @scale);
    }
    &.small4 {
        top: calc(26.5vw * @scale);
        left: calc(34.6vw * @scale);
        transform: rotate(93deg);
    }
}

.star {
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: #ffde00;
    border-top-color: transparent;
    border-top: 0 solid transparent;

    &.part1 {
        transform: rotate(35deg);
    }

    &.part2 {
        transform: rotate(-35deg);
    }

    &.part3 {
        transform: rotate(107deg);
    }

    &.starBig {
        border-right-width: @ratioLR * @bigSize * @scale;
        border-bottom-width: @ratioB * @bigSize * @scale;
        border-left-width: @ratioLR * @bigSize * @scale;
    }

    &.starSmall {
        border-right-width: @ratioLR * @smallSize * @scale;
        border-bottom-width: @ratioB * @smallSize * @scale;
        border-left-width: @ratioLR * @smallSize * @scale;
    }

}